导航菜单

How to Deploy React

Section 3: Setting up a React-Vite App on Firebase

Setting Up Firebase CLI

To deploy your app, install the Firebase CLI globally by running:

npm install -g firebase-tools

Creating a Firebase Project

Go to Firebase, click “Firebase Console” at the top, and select “Add project”.

2. Enter a project name and click “Continue”. It is highly recommended to enable Google Analytics for your project.

3. Click “Create project”.

Registering the Firebase App

After creating the project, follow these steps:

Firebase Console project overviewClick the settings icon to the right of “Project overview” and select “Project settings”.Scroll to the end of the page, then click on the third icon labeled “Web apps.”Firebase Console project settings

3. You should have a Register app page like this:

Firebase Console web app registration page

4. Enter your project name, select “Hosting” as the default feature and click “Register app”.

5. Complete all the steps till you get to Continue to console and scroll to the end of the page till you see this:

Firebase console web app after registration

Installing the Firebase SDK and initializing Firebase

Install Firebase SDK and initialize firebase in your project by running the following command:npm install firebase

2. Create a firebase.js file and paste the code that follows the npm install firebase command into the file..

3. Authenticate the Firebase CLI using your Google account, In your terminal, run:

firebase login

4. Then, initialize Firebase by running:

firebase init

5. Follow these instructions:

‘Are you ready to proceed? — Use command Y for YES‘Which Firebase features do you want to set up for this directory?’ — Choose Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys (to choose press the space button then enter)‘Please select an option’ — Select ‘Use an existing project’ and choose your previously created project.‘What do you want to use as your public directory?’ — Type dist‘Configure as a single-page app (rewrite all urls to /index.html)?’ — Use command Y‘‘Set up automatic builds and deploys with GitHub?’ — use command N for NO

You’ll receive a message indicating that Firebase initialization is complete.

相关推荐: